<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" :autoBack="true" title="提交订单"></u-navbar>
		<view class="margin-top-xs bg-white padding-sm">
			<view class="flex justify-between align-center">
				<text class="text-grey">所属门店</text>
				<text class="text-black text-df text-bold">{{params.storeName}}</text>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-start justify-start">
				<image :src="params.roomImage" style="width: 100px;height: 100px;border-radius: 10px;"></image>
				<view class="margin-left-sm">
					<view class="text-lg text-bold">{{params.roomName}}</view>
				</view>
			</view>
		</view>
		<view class="margin-top-xs bg-white padding-sm">
			<view class="flex align-center justify-between">
				<text>开始时间</text>
				<text>{{params.startTime}}</text>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-center justify-between">
				<text>结束时间</text>
				<text>{{params.endTime}}</text>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-center justify-between">
				<text>共计时长</text>
				<view>
					<text>共{{params.allhoure}}小时</text>
				</view>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-center justify-between">
				<text>共计费用</text>
				<view v-if="isMember" class="flex flex-direction align-end">
					<text class="text-gray text-sm text-price"
						style="text-decoration: line-through; ">{{needPrice}}</text>
					<text class="margin-top-xs text-tea text-bold text-price">{{memberPrice}}</text>
				</view>
				<view v-else>
					<text class="text-price">{{needPrice}}</text>
				</view>
			</view>
		</view>
		<view class="margin-top-xs bg-white padding-sm">
			<view class="flex align-center justify-between">
				<text>卡券</text>
				<view v-if="changeYHQPackage.StorePackage.Id" class="flex flex-direction align-end">
					<view class="line-blue" @click="gotoChanegPackage">
						<text>{{changeYHQPackage.StorePackage.Title}}</text>
						<text class="cuIcon-right text-blue"></text>
					</view>
					<text class="text-sm text-gray margin-top-xs">减免金额：{{params.jianMianMoney}}</text>
					<text class="text-sm text-gray margin-top-xs" style="text-decoration: underline;"
						@click="cancelUsePackage()">取消使用卡券</text>
				</view>
				<view v-else class="line-blue" @click="gotoChanegPackage">
					<text>暂无可用卡券</text>
					<text class="cuIcon-right text-blue"></text>
				</view>
			</view>
			<u-line dashed margin="10px 0px 10px 0"></u-line>
			<view class="flex align-center justify-between">
				<text>优惠券</text>
				<view class="line-blue" @click="gotoChanegPackage">
					<text>暂无可用优惠券</text>
					<text class="cuIcon-right text-blue"></text>
				</view>
			</view>
		</view>
		<view class="margin-top-xs bg-white padding-sm">
			<view>温馨提示</view>
			<view class="margin-top-xs text-sm" v-html="storeDetalis.store.PayReminder"></view>
		</view>
		<view v-show="!isMember" @click="makeMember"
			class="margin-sm  padding-xl flex align-center justify-between radius  bg-white">
			<view class="flex align-center">
				<text class="cuIcon-vip" style="color: #89674C;font-size: 30px;"></text>
				<text style="color: #89674C;" class="text-bold margin-left-xs">成为会员立享优惠</text>
			</view>
			<view>
				<text style="color: #89674C;" class="text-bold">去了解</text>
				<text class="cuIcon-right" style="color: #89674C;"></text>
			</view>
		</view>
		<view class="flex align-center justify-center u-safe-bottom margin-top-lg"
			style="bottom: 0px;left: 0px;width: 100%;">
			<button @click="submitOrder" class="bg-tea cu-btn u-safe-bottom margin-bottom-lg"
				style="width: 94%;height: 80rpx;">
				余额支付
			</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				params: {
					storeId: '', //店铺Id,
					roomId: '', //房间Id,
					startTime: '', //开始时间,
					endTime: '', //结束时间
					allhoure: '', //共多少小时
					roomImage: '',
					storeName: '',
					roomName: '',
					jianMianMoney: 0,
				},
				needPrice: '', //实际所需金额
				memberPrice: '', //会员优惠完后的金额
				isMember: null,
				balance: '', //余额
				out_trade_no: '',
				userPackage: {
					canUse: [], //可用的卡券，
					canNotUse: [], //不可用的卡券
				},
				changeYHQPackage: {
					StorePackage: {
						Id: '',
						Title: ''
					}
				}, //选择的优惠券
				storeDetalis: {},
			}
		},
		onLoad(params) {
			this.params = params;
			this.getStoreDetalis();
		},
		created() {
			const vm = uni.getStorageSync('UserInfo');
			this.isMember = vm.user?.isMember;
			this.checkUserIsVip();
		},

		methods: {
			//获取门店详情
			getStoreDetalis() {
				uni.$u.http.post('/Customer/GetStoreDetalis', {
					id: this.params.storeId
				}).then(res => {
					this.storeDetalis = res.data;
				});
			},
			//跳转到卡券选择页面
			gotoChanegPackage() {
				uni.setStorageSync('UserPackage', this.userPackage);
				let that = this;
				uni.navigateTo({
					url: '/pagesA/store/canusepackage',
					events: {
						acceptDataFromOpenedPage: function(data) {
							that.changeYHQPackage = data;
							that.getOrderPrice();
						},
					}
				})
			},
			//取消使用卡券
			cancelUsePackage() {
				this.changeYHQPackage = {
					StorePackage: {
						Id: '',
						Title: ''
					}
				};
				this.getOrderPrice();
			},
			//成为会员
			makeMember() {
				uni.navigateTo({
					url: '/pagesA/member/introduce'
				})
			},
			//判断一下用户是否是vip
			checkUserIsVip() {
				uni.$u.http.post('/Customer/CheckUserIsVip').then(res => {
					this.isMember = res.data.isMember; //是否为会员
					this.balance = res.data.balance; //会员余额
					//选择用户可用的卡券、优惠券
					this.getUserCanUsePackage();
				});
			},
			//获取用户可用的优惠券、卡券
			getUserCanUsePackage() {
				let data = {
					storeId: this.params.storeId, //店面Id,
					roomId: this.params.roomId, //房间Id,
					startTime: this.params.startTime, //开始时间
					endTime: this.params.endTime, //结束时间
				};
				uni.$u.http.post('/Customer/GetUserCanUsePackage', data).then(res => {
					this.userPackage = res.data;
					if (res.data.canUse.length > 0) {
						this.changeYHQPackage = res.data.canUse[0];
					} else {
						this.changeYHQPackage = {
							StorePackage: {
								Id: '',
								Title: ''
							}
						};
					}
					this.getOrderPrice();
				})
			},
			//获取工单实际消费
			getOrderPrice() {
				const changYHQId = this.changeYHQPackage.StorePackage.Id ?? ''; //选择的优惠券返回
				let data = {
					storeId: this.params.storeId, //店面Id,
					roomId: this.params.roomId, //房间Id,
					startTime: this.params.startTime, //开始时间
					endTime: this.params.endTime, //结束时间
					changYHQId: changYHQId,
				};
				uni.showLoading();
				uni.$u.http.post('/Customer/GetOrderPrice', data).then(res => {
					this.needPrice = res.data.needPrice; //实际价格
					this.memberPrice = res.data.memberPrice; //会员价格
					this.params.allhoure = res.data.totalHours; //总时长
					this.params.jianMianMoney = res.data.jianMianMoney; //减免金额
				});
			},
			//创建订单
			submitOrder() {
				//开始创建订单，返回一个工单
				uni.showLoading({
					title: '创建订单中',
				});

				const changYHQId = this.changeYHQPackage.StorePackage.Id ?? ''; //选择的优惠券返回
				let data = {
					storeId: this.params.storeId, //店面Id,
					roomId: this.params.roomId, //房间Id,
					startTime: this.params.startTime, //开始时间
					endTime: this.params.endTime, //结束时间
					changYHQId: changYHQId, //选择的优惠券Id
					needPrice: this.isMember ? this.memberPrice : this.needPrice
				};
				uni.$u.http.post('/Customer/SubmitOrder', data).then(res => {
					if (res.status == -2) {
						uni.showModal({
							title: '提示',
							content: '当前余额(' + this.balance + '元)不足，是否跳转到充值页面？',
							showCancel: true,
							success: function(e) {
								if (!e.confirm) {
									return;
								}
								uni.navigateTo({
									url: '/pagesA/member/storedcard'
								})
							}
						})
					}
					if (res.status != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						return;
					}
					uni.redirectTo({
						url: '/pagesB/layout/orderpaysuc?orderId=' + res.data.orderId
					})
				});
			},
			goBack() {
				uni.navigateBack();
			},

		}
	}
</script>

<style scoped>

</style>